<template>
  <view>
    <u-navbar :border-bottom="false" :is-back="false" title="" :background="{backgroundColor: 'rgba(0,0,0,0)'}">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#fff"></u-icon>
        </view>
        <view class="u-f-ajc">
          <image src="/static/images/header.png" mode="widthFix"></image>
        </view>
        <view class="u-f1" style="text-align: right;">
          <u-button type="error" shape="circle" size="mini" :custom-style="customStyle"
            @click="$u.route(`/mine-module/lingquan/order`)">订单</u-button>
        </view>
      </view>
    </u-navbar>

    <view class="num_box f-w-700 u-f-ajc u-f-column">
      <view>汇购活动</view>
    </view>


    <view class="content relative">
      <!-- <scroll-view scroll-x class="scroll_box">
        <view class="scroll_item" v-for="(item, index) in list" :key="index">
          <view>{{ item.init_time | unixToDate('MM-dd hh:mm') }}</view>
          <view class="u-f-ajc">
            <view> {{computTime(item.init_time)>0 ? '距结束' : '距开始'}}</view>
            <view><u-count-down :show-days="false" :timestamp="computTime(item.init_time)" bg-color="rgba(0,0,0,0)"
                color="#8B3A3F" separator-color="#8B3A3F" font-size="26" separator-size="26"></u-count-down></view>
          </view>
        </view>
      </scroll-view> -->
      <view class="list">
        <view class="item u-f u-f-jsb" v-for="(item, index) in list" :key="index" @click="openDetail(item, index)">
          <view class="u-f">
            <image :src="item.thumbnail"></image>
            <view class="u-f u-f-jsb u-f-column image_right">
              <view class="u-f-ac u-f-jsb">
                <view class="f-w-700" style="font-size: 32rpx;">{{item.name}}</view>
                <view>{{ item.init_time | unixToDate('MM-dd hh:mm') }}</view>
              </view>
              <view>
                <view class="price f-w-700">{{item.least}} - {{item.maximum}}</view>
                <view class="count_down u-f-ac">
                  <view>开团倒计时</view>
                  <u-count-down :show-days="false" :timestamp="computTime(item.init_time)" bg-color="#CB2537"
                    color="#fff" separator-color="#fff" font-size="28" separator-size="28"></u-count-down>
                </view>
              </view>
            </view>
          </view>
          <view class="u-f u-f-jsb u-f-column">
            <view class="status f-w-700">{{item.status}}</view>
            <view class="f-w-700" style="font-size: 30rpx;margin: 0 10rpx 10rpx;text-align: right;">
              第{{item.current_period}}期</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as API_Malls from '@/api/malls.js';
  export default {
    data() {
      return {
        params: {
          pageNo: 1,
          pageSize: 6,
          status: '',
          createTime: '',
        },
        list: [],

        customStyle: {
          backgroundColor: 'rgba(0,0,0,0)',
          color: '#fff',
          border: '1px solid #fff'
        },
      }
    },
    onLoad() {
      this.getMallPosition()
    },
    onReachBottom() {
      this.params.pageNo += 1
      this.getMallPosition()
    },
    computed: {
      computTime() {
        return function(str) {
          if (str) {
            let now = new Date().getTime()
            return (Number(str) * 1000 - now) / 1000
          } else {
            return 0
          }
        }
      },

    },
    methods: {
      async getMallPosition() {
        let res = await API_Malls.getMallPosition(this.params)
        this.list.push(...res.data)
      },
      openDetail(item, index) {
        uni.setStorageSync('positionDetail', item)
        this.$u.route(`/mine-module/lingquan/position2?id=${item.id}`)
      },
    },
  }
</script>

<style lang="scss">
  .content {
    padding: 0 20rpx 100rpx;
    box-sizing: border-box;
    z-index: 99;

    .list {
      width: 100%;
      padding: 0 10rpx 0 20rpx;
    }

    .item {
      background-color: #fff;
      border-radius: 40rpx;
      border: 10rpx solid #F7C379;
      padding: 30rpx 20rpx;
      margin-bottom: 30rpx;

      image {
        width: 160rpx;
        height: 160rpx;
        margin-right: 30rpx;
      }

      .image_right {
        height: 160rpx;

        .price {
          color: #FA0A0A;
          font-size: 34rpx;
        }

        .count_down {
          margin-top: 4rpx;
          color: #fff;
          background-color: #CB2537;
          border-radius: 10rpx;
          padding: 4rpx;
          font-weight: 700;
        }
      }

      .status {
        padding: 6rpx 20rpx;
        color: #07BD5E;
        border: 1px solid #07BD5E;
        border-radius: 10rpx;
        font-size: 30rpx;
      }
    }
  }

  .scroll_box {
    width: 100%;
    background-color: #fff;
    white-space: nowrap;

    .scroll_item {
      width: 33.3%;
      padding: 20rpx 0;
      display: inline-block;

      view {
        text-align: center;
      }

      >view:nth-of-type(2) {
        color: #8B3A3F;
      }
    }
  }
</style>



<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .num_box {
    padding: 30rpx 0 60rpx;
    color: #FFDDAE;

    >view:nth-of-type(1) {
      font-size: 60rpx;
    }
  }
</style>